<template>
  <view class="box">
       <scroll-view
      class="main"
      @scrolltolower="loadMore"
      scroll-y
    >
    <uni-search-bar
      class="uni-mt-10"
      radius="100"
      placeholder="搜索人名、内容"
      clearButton="none"
      cancelButton="none"
      @confirm="search"
    >
    </uni-search-bar>
    <u-tabs
      :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)',
      }"
      itemStyle="width:50%;height:40px"
      lineWidth="100"
      :list="list1"
      @click="changeTab"
    >
    </u-tabs>
    <!-- 待处理 -->
    <view v-if="searchValue === 0">
      <view
        @click="clickDetail(item)"
        v-for="(item, index) in todoLists"
        :key="index"
      >
        <view class="apply_zhong">
          <text
            >{{ item.startUsername }}的{{ item.processDefinitionName }} {{
            item.variables.startTime? item.variables.startTime.replace(/-/g,''):''
          }}</text
          >
          <text style="color: #b2aaaa; font-size: 12px">{{
             item.createTime.slice(0,10)
          }}</text>
        </view>
        <view class="apply_bottom">
          <view>申请理由：{{ item.variables.approveReason?item.variables.approveReason: item.variables.useReason  }} </view>
        </view>
      </view>
    </view>
    <!-- 已处理 -->
    <view v-if="searchValue === 1">
      <view
        @click="clickDetail(item)"
        v-for="(item, index) in myDoneLists"
        :key="index"
      >
       
         <view class="apply_zhong">
          <text 
          style="flex:3"
            >{{ item.startUsername }}的{{ item.processDefinitionName }} {{item.variables.startTime? item.variables.startTime.replace(/-/g,''):''}}
           </text>
          <text
            v-if="item.processIsFinished === 'reject'"
            class="apply_zhong_bs"
            >{{ statusbar(item.processIsFinished) }}</text
          >
          <text v-else class="apply_zhong_bt">{{
            statusbar(item.processIsFinished)
          }}</text>

          <text style="color: #b2aaaa; font-size: 12px;flex: 1;padding-left:7%">{{
      item.createTime.slice(0,10)
          }}</text>
        </view>
        <view class="apply_bottom">
          <view>申请理由：{{ item.variables.approveReason?item.variables.approveReason: item.variables.useReason  }} </view>
          <view
            v-if="item.processIsFinished === 'reject'"
            style="color: #e24959; margin: 10px 0 0 0"
          >
            驳回原因：{{ fullMessage(item) }}
          </view>
        </view>
      </view>
    </view>
    </scroll-view>
  </view>
</template>

<script>
import { todoList, myDoneList } from "@/api/work";
export default {
  name: "MinirabbitIndex",
  data() {
    return {
      searchValue: 0,
      size:10,
      loding:false,
      list1: [
        {
          name: "待处理",
        },
        {
          name: "已处理",
        },
      ],
      todoLists: [],
      myDoneLists: [],
      status: [
        {
          label: "进行中",
          value: "unfinished",
        },
        {
          label: "已完成",
          value: "finished",
        },
        {
          label: "已终结",
          value: "terminate",
        },
        {
          label: "已撤销",
          value: "withdraw",
        },
        {
          label: "已撤回",
          value: "recall",
        },
        {
          label: "被驳回",
          value: "reject",
        },
        {
          label: "已删除",
          value: "deleted",
        },
      ],
    };
  },
  onLoad() {
      if (this.searchValue === 0) {
        this.getTodoLists(this.size);
      } else {
        this.getMyDoneLists(this.size);
      }
  },
  mounted() {},

  methods: {
     async loadMore(){
      console.log('触底了');
      if (this.loding) {
      this.size=this.size+10
        if (this.searchValue === 0) {
        this.getTodoLists(this.size);
      } else {
        this.getMyDoneLists(this.size);
      }
      }
    },
     // 驳回原因
    fullMessage(item) {
      const res = item.comments.find((items) => {
        return items.type === "rollbackComment";
      });
      return res?.fullMessage;
    },
     statusbar(val) {
      return this.status.find((item) => item.value === val).label;
    },
    search(value) {
    },
    async getTodoLists() {
      const res = await todoList(this.size);
      this.todoLists = res.data.records;
      if (res.data.total>this.size) {
        this.loding=true
      }else{
        this.loding=false
      }
    },
    async getMyDoneLists() {
      const res1 = await myDoneList(this.size);
      this.myDoneLists = res1.data.records;
       if (res1.data.total>this.size) {
        this.loding=true
      }else{
        this.loding=false
      }
    },
    changeTab(row) {
      this.searchValue = row.index;
      this.size=10
      this.loding=false
      if (this.searchValue === 0) {
        this.getTodoLists(this.size);
      } else {
        this.getMyDoneLists(this.size);
      }
    },
    // 跳转详情
    clickDetail(item) {
      if (item.processDefinitionKey === "office-article") {
        //发文申请详情
        this.searchValue === 0
          ? uni.navigateTo({
              url: `/pages/cardetail/dispatchdetail?row=${JSON.stringify(
                item
              )}&type=0`,
            })
          : uni.navigateTo({
              url: `/pages/cardetail/dispatchdetail?row=${JSON.stringify(
                item
              )}`,
            });
      } else if (item.processDefinitionKey === "office-seal") {
        // 用章申请详情
        this.searchValue === 0
          ? uni.navigateTo({
              url: `/pages/cardetail/chaptersdetail?row=${JSON.stringify(
                item
              )}&type=0`,
            })
          : uni.navigateTo({
              url: `/pages/cardetail/chaptersdetail?row=${JSON.stringify(
                item
              )}`,
            });
      } else if (item.processDefinitionKey === "office-car") {
        //用车申请详情
        this.searchValue === 0
          ? uni.navigateTo({
              url: `/pages/cardetail/index?row=${JSON.stringify(item)}&type=0`,
            })
          : uni.navigateTo({
              url: `/pages/cardetail/index?row=${JSON.stringify(item)}`,
            });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 100vh;
}
.main {
  overflow: hidden;
}
.apply_zhong {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  .apply_zhong_bt {
    padding: 1px 5px;
    // margin-left: 30px;
    color: #21bd49;
    border: 1px solid #21bd49;
    border-radius: 5px;
  }
  .apply_zhong_bs {
    padding: 1px 5px;
    // margin-left: 30px;
    color: #e56031;
    border: 1px solid #e56031;
    border-radius: 5px;
  }
}
.apply_bottom {
  font-size: 13px;
  padding: 8px 10px 20px;
  border-bottom: 1px solid #dddddd;
  .cxedit {
    text-align: right;
    background-color: #169bd5;
    border-radius: 5px;
    color: #fff;
    padding: 10px 0;
    margin-left: 80%;
  }
}
</style>